import React, {useState} from "react"


const Panel = ({title,children,isActive,onShow}) => {

    return (
        <section>
            <h3>{title}</h3>
            {isActive?(
                <p>{children}</p>
            ):(
                <button onClick={onShow}>
                    显示
                </button>
            )}
        </section>
    )
}
const Test2 = () => {
    // const [isActive,setIsActive] = useState(0)
    const [isActiveIndex,setIsActiveIndex] = useState(0)
    return (
        <>
            <h2>哈萨克斯坦，阿拉木图</h2>
            <Panel onShow={() =>setIsActiveIndex(0)} isActive={isActiveIndex==0} title='关于'>
                阿拉木图人口约200万，是哈萨克最大的城市
            </Panel>
            <Panel onShow={() =>setIsActiveIndex(1)} isActive={isActiveIndex==1} title='词源'>
                这个名字来自于哈萨克语苹果的意思
            </Panel>
        </>
    )
}

export default Test2